<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="添加收款账户">
        <template v-if="list.length" #extra>
          <image
            src="../../../assets/images/wallet/add.png"
            @click="toAdd"
            style="width: 53rpx; height: 53rpx"
          ></image>
        </template>
      </pageHead>
    </template>
    <view class="content">
      <view v-if="list.length" class="list">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="item flex flex-bt gg"
          :style="{ background: item.accountType == 1 ? '#0B5CF8' : '#3D50FD' }"
        >
          <view class="bank-icon flex flex-a">
            <image
              class="icon"
              :src="
                item.accountType == 1
                  ? require('../../../assets/images/wallet/ali.png')
                  : require(`../../../assets/images/wallet/union.png`)
              "
              :style="{
                width: item.accountType == 1 ? '44rpx' : '64rpx',
                height: item.accountType == 1 ? '44rpx' : '48rpx',
              }"
            ></image>
          </view>
          <view class="f1 flex flex-bt">
            <view>
              <view class="name">{{
                item.accountType == 1 ? "支付宝" : item.bankName
              }}</view>
              <view class="num flex flex-a fs-32 bold">
                <text>{{ hideNumber(item.accountNumber) }}</text>
                <image
                  class="copy"
                  @click="copy(item.accountNumber)"
                  src="../../../assets/images/setting/copy-white.png"
                  style="
                    margin-left: 16rpx;
                    margin-top: 4px;
                    display: inline-block;
                  "
                />
              </view>
            </view>
            <!-- <image
              v-if="item.bankCode"
              :src="
                require(`../../../assets/images/banks/${item.bankCode}.png`)
              "
              style="width: 160rpx; height: 160rpx; opacity: 0.2"
            /> -->
          </view>
        </view>
      </view>
      <view v-if="!list.length && !loading" class="empty t-center">
        <image src="../../../assets/images/empty/bank.png" />
        <view class="t-center fs-32 c-60">暂无收款账户~</view>
        <view @click="toAdd" class="active-btn btn fs-32">
          <image
            src="../../../assets/images/wallet/add-w.png"
            class="icon"
            style="width: 64rpx; height: 64rpx; margin-right: 16rpx"
          />
          添加收款账户
        </view>
      </view>
      <canvas
        style="opacity: 0; user-select: none; pointer-events: none"
        canvas-id="canvasId"
      />
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getAccountList } from "../../../api/setting/index";
import jsyh from "../../../assets/images/svgs/jsyh";
import { copyText } from "../../../assets/utils";
export default {
  components: {
    layout,
    pageHead,
    jsyh,
  },
  data() {
    return {
      list: [],
      loading: true,
      backgorund: "#436af3",
    };
  },
  async onShow() {
    this.loading = true;
    getAccountList()
      .then(async (res) => {
        this.list = res.data;
      })
      .finally(() => {
        this.loading = false;
      });
  },
  watch: {
    loading(val) {
      if (val) {
        uni.showLoading({
          mask: true,
        });
      } else {
        uni.hideLoading();
      }
    },
  },
  methods: {
    hideNumber(num) {
      return "********" + num.substring(num.length - 4);
    },
    copy(text) {
      copyText(text);
    },
    // 获取图片主要颜色
    getMainColor(imageUrl, canvasId = "canvasId", callback) {
      return new Promise((resolve, reject) => {
        if (!imageUrl) return resolve(`67, 106, 243`);
        uni.getImageInfo({
          src: imageUrl,
          success: function (img) {
            const ctx = uni.createCanvasContext(canvasId);
            const imgWidth = 300;
            const imgHeight = 150;
            ctx.drawImage(img.path, 0, 0, imgWidth, imgHeight);
            ctx.save();
            ctx.draw(true, () => {
              uni.canvasGetImageData({
                canvasId: canvasId,
                x: 0,
                y: 0,
                width: imgWidth,
                height: imgHeight,
                success(res) {
                  const data = res.data;
                  const map = {};
                  let maxCount = 0;
                  let dominantColor = null;

                  for (let i = 0; i < data.length; i += 4) {
                    const color = [data[i], data[i + 1], data[i + 2]].join(",");
                    map[color] = (map[color] || 0) + 1;
                    if (map[color] > maxCount) {
                      maxCount = map[color];
                      dominantColor = color;
                    }
                  }
                  resolve(dominantColor + ",0.8");
                },
                fail(res) {
                  console.log("fail", res);
                },
              });
            });
          },
          fail: (res) => {
            console.log("fail");
          },
        });
      });
    },
    toAdd() {
      console.log(123);
      uni.navigateTo({
        url: "/pages/mine/wallet/addAccount",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  box-sizing: border-box;
  height: 100%;
  background: #f7f8ff;
  padding: 32rpx;
  .empty {
    padding-top: 96rpx;
    image {
      width: 400rpx;
      height: 400rpx;
    }
    .btn {
      height: 88rpx;
      margin-top: 48rpx;
    }
  }
  .list {
    padding-bottom: 32rpx;
    .item {
      width: 100%;
      padding: 32rpx 24rpx;
      border-radius: 24rpx;
      color: #ffffff;
      position: relative;
      height: 200rpx;
      margin-bottom: 32rpx;
      .bank-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: #ffffff;
        justify-content: center;
        margin-right: 16rpx;
      }
      .icon {
        width: 60rpx;
        height: 60rpx;
        flex-shrink: 0;
      }
      .copy {
        width: 38rpx;
        height: 38rpx;
      }
      .bg {
        position: absolute;
        right: 32rpx;
        bottom: 20rpx;
        width: 113rpx;
        height: 120rpx;
      }
      .name {
        margin-bottom: 8rpx;
      }
    }
  }
}
</style>
